<template>
  <div>
    <el-table
      :data="tableData"
      border
      :align='center'
      :cell-style='cellStyle'
      :header-cell-style='rowClass'
      style="width: 100%">
      <el-table-column
        label=""
        prop="addressId"
        v-if=false>
      </el-table-column>
      <el-table-column
        label="配送地址"
        prop="addressName">
      </el-table-column>
      <el-table-column
        label="操作"
        prop="">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="resetRow(scope.$index,scope.row)"
            type="text"
            size="40">
            修改
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index,scope.row)"
            type="text"
            size="40">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>您确定要删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isDelete">确 定</el-button>
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {requestGet, requestPost} from "../../../network/request";

    export default {
        name: "suggestion",
      methods: {
        cellStyle({row, column, rowIndex, columnIndex}){
          return 'text-align:center';
        },
        rowClass({row, rowIndex}){
          return 'text-align:center';
        },
        isDelete(){
          this.dialogVisible = false;
          requestPost({
            url: 'address/delete',
            data: {
              addressId: this.id
            }
          });
          this.tableData.splice(this.index, 1);
        },
        resetRow(index,rows){
          let id = rows.addressId;
          this.$router.push('/content/resetAddress/'+id)
        },
        deleteRow(index, rows) {
          this.index = index;
          this.id = rows.addressId;
          this.dialogVisible = true;
        }
      },
      mounted() {
          requestGet({
            url: 'address/all'
          }).then(response=>{
            this.tableData = response.data.list;
          })
      },
      data() {
        return {
          index: null,
          id: null,
          dialogVisible: false,
          tableData: [
          ]
        }
      }
    }
</script>

<style scoped>

    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }


</style>
